import { WeaEchart } from 'ecCom';


export default class FnaPieChart extends React.Component {

	constructor(props) {
        super(props);

        this.state = {
            categories : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            series : [{
                name:'预算数',
                type:'bar',
                data:[1195.00, 2500.00]
            },
            {
                name:'审批中费用',
                type:'bar',
                data:[0.00, 762.00]
            },
            {
                name:'实际发生数',
                type:'bar',
                data:[0.00, 3.00]
            },
            {
                name:'可用预算数',
                type:'bar',
                data:[1195.00, 1735.00]
            }],
            yAxis: {
                //min : 0,
                //max : 2700
                
            },
            tooltip: {
                show : true
               
            },
            grid: {
                //left:40
            },
            color:[
                    '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
                    '#8d98b3'
                  ],
            option:{
                title: {
                	text: '',
			        subtext: '',
			        x:'center'

                },
                tooltip: {
                	trigger: 'item',
        			formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
			    },
                color:[
                    '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
                    '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
                    '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
                    '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
                  ],
                series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius : '50%',
			            center: ['51%', '50%'],
			            data:[
			                {value:335, name:'直接访问'},
			                {value:310, name:'邮件营销'},
			                {value:234, name:'联盟广告'},
			                {value:135, name:'视频广告'},
			                {value:1548, name:'搜索引擎'}
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
		    	]
            }
        }
    }


	shouldComponentUpdate(nextProps, nextState) {
        let { data } = this.props;
        if( JSON.stringify(data) == JSON.stringify(nextProps.data)){
            return false;
        } else {
            return true;
        }
	}
	

	componentDidUpdate() {
        if(this.refs != undefined){
            if(this.refs.chart2 != undefined){
                this.refs.chart2.paint();//重新渲染
            }
        }
	}

    chartAction = (chart) => {
        //防止多次onclick
        chart.off("click");
        chart.on('click', (params) => {
          let {mainStore} = this.props;
          let {form,pageType} = mainStore;
          let searchParamsAd = form.getFormParams();
          let seriesType = params.seriesType;
          let orgIds = searchParamsAd.orgIds;
          let year = searchParamsAd.year;
          let subjectId = params.data.id;

          if("FnaProjectExpense" == pageType){
                orgIds = searchParamsAd.projectId;
          }else if("FnaCompactExpense" == pageType){
                orgIds = searchParamsAd.compactNu;
          }else if("FnaCustomerExpense" == pageType){
                orgIds = searchParamsAd.customerId;
          }
          
          if(pageType != 'FnaSummaryExpense'){//1、费用汇总不允许点击
             window.open("/spa/fna/index_mobx.html#/main/fna/fnaExpenseCommonList?seriesType="+seriesType+"&orgIds="+orgIds+
             "&subjectId="+subjectId+"&year="+year+"&pageType="+pageType);
          }
        });
    }

	render() {

		let {option} = this.state;
        const {legendData,pieDatas,data} = this.props;

        option.legend.data = legendData;
        option.series[0].data = pieDatas;

        if(JSON.stringify(data) != '{}'){
            return (
                <div style={{height: 640}}>   
                    <div style={{height: 560}}>
                        <WeaEchart ref="chart2"
                           chartName={option.title}
                     
                           option={option} 
                           chartAction={this.chartAction}
                           ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@FnaPieChart`}
                        />
                    </div>
                </div>
            );
        }else{
            return( <div style={{height: 440}}></div>);
        }
	}	

}